<template>
	<view class="home">
		<u-toast ref="uToast"></u-toast>
		<u-no-network></u-no-network>
		<u-back-top :scroll-top="scrollTop" :right="24" :bottom="240"></u-back-top>
		<view class="home__title">
			<text @click="showBottomDialog=true">{{channelName}}</text>
			<image src="/static/image/home/icon_change.png" mode="" class="home__title__change"></image>
		</view>
		<BenefitCompass :channelName="channelName"></BenefitCompass>
		<ServiceCompass @change="handleOrderList" v-if="showServiceCompass" ref="orderCompass"></ServiceCompass>
		<NoticeCompass class="u-margin-bottom-30"></NoticeCompass>
		<u-popup v-model="showBottomDialog" mode="bottom" class="pop">
			<view class="pop__item" v-for="(item, index) in channelList" :key="index"
				@click="switchingChannel(item.channelNo)">
				<u-image class="pop__icon" width="60rpx" height="60rpx" :src="item.logoImgUrl"></u-image>
				<view>{{item.name}}</view>
			</view>

		</u-popup>

	</view>
</template>

<script>
	import upApp from "@/uni_modules/uni-upgrade-center-app/utils/check-update.js";


	import BenefitCompass from "./components/BenefitCompass.vue";
	import ServiceCompass from "./components/ServiceCompass.vue";
	import NoticeCompass from "./components/NoticeCompass.vue";
	export default {
		components: {


			BenefitCompass,
			ServiceCompass,
			NoticeCompass
		},
		data() {
			return {
				showBottomDialog: false,
				scrollTop: 0,
				showServiceCompass: true,

				status: "loadmore",
				channelList: [],
				channelName: "",
				requestBody: {
					channelNo: ""
				},

			};
		},
		onReachBottom() {
			this.onScrolltolower();
		},
		onLoad() {
			this.init();
			this.getAllChannelLists();

		},
		onShow() {
			this.$forceUpdate();
			const that = this;

		},
		onReady() {
			//#ifdef APP-PLUS||APP-NVUE||APP-PLUS-NVUE
			upApp();
			//#endif
		},
		computed: {
			permissions() {
				return uni.$zx.permissions;
			},
		},
		onTabItemTap({
			index,
			pagePath,
			text
		}) {
			uni.removeStorageSync("newsCompass");
			uni.removeStorageSync("order_deliver");
		},
		methods: {
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			onScrolltolower() {
				this.status = "loading";

			},

			init() {},

			getAllChannelLists() {
				this.$zx.user_api.getAllChannelLists().then((data) => {
					// console.log("data=" + JSON.stringify(data))
					this.channelList = data;
					this.channelName = this.channelList[0].name
				});
			},
			switchingChannel(channel) {
				const _that = this;
				_that.requestBody.channelNo = channel;
				_that.$zx.user_api.switchingChannel(_that.requestBody).then((data) => {
					console.log("data=" + JSON.stringify(data))
					if (data) {
						_that.showBottomDialog = false;
						_that.channelName = data.name;

					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.home {
		// padding: 24rpx 16rpx;
		position: relative;

		&__title {
			font-size: 18px;
			font-weight: bold;
			background: white;
			padding: 30rpx 20rpx;
			padding-top: 68rpx;

			&__change {
				width: 34rpx;
				height: 34rpx;
				margin: 0 0 0 10rpx;

			}
		}

		&__news {
			width: 720rpx;
			height: 140rpx;
			border-radius: 12rpx;
			position: relative;

			&--image {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2222;
			}

			&--swiper {
				flex: 1;
			}
		}

		&__grid-group {
			background-color: #ffffff;
			border-radius: 20rpx;
			padding: 0 10rpx;
		}
	}

	.point {
		display: block;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: $zx-theme-color;
		margin-left: 16rpx;
	}

	.pop {
		// background-color: white;
		// padding: 20rpx;

		&__item {
			height: 80rpx;
			line-height: 80rpx;
			margin: 30rpx 20rpx;
			background-color: #f6f6f6;
			display: flex;
			align-items: center;
		}

		&__icon {
			display: inline-block;
			margin-left: 20rpx;
			margin-right: 10rpx;
		}
	}
</style>